<template>
  <div class="mailbox-layout">
    <el-container>
      <el-header class="mailbox-header">
        <!-- 顶部导航栏内容，如账户信息、设置等 -->
        <MailboxHeader @search = "handleSearch"
                       @open-dialog = "dialogVisible = true"

        />

      </el-header>

      <el-container>
        <el-aside class="mailbox-sidebar">
          <!-- 左侧侧边栏内容，使用MailboxSidebar组件 -->
            <MailboxSidebar @row-clicked="handleRowClicked"
                            @go-to="goToContact"
                            @go-to-write="goToWrite"
            />
        </el-aside>
        <el-main class="mailbox-main">
          <!-- 邮件内容区域，可以是EmailList或EmailDetail组件 -->
          <div>
            <router-view>
            <component :is="currentComponent" v-if="currentComponent" >
            </component>
            </router-view>
          </div>
        </el-main>
      </el-container>
      <el-dialog
          title="修改密码"
          :visible.sync="dialogVisible"
          width="30%"
      >
        <el-form :model="form" ref="form" :rules="rules" label-width="80px">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="form.oldPassword"  show-password type="password"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="form.newPassword" show-password type="password"></el-input>
          </el-form-item>
          <el-form-item label="确认密码"  prop="confirmPassword">
            <el-input v-model="form.confirmPassword"  show-password type="password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import MailboxSidebar from './MailboxSidebar.vue';
import MailboxList from "@/views/Mailbox/MailboxList.vue";
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
import MailDetail from "@/components/Mailbox/MailDetail.vue";
import MailboxHome from "@/views/Mailbox/MailboxHome.vue";
import ContactList from "@/views/Contact/ContactList.vue";
import MailboxHeader from "@/components/Header/MailboxHeader.vue";
import axios from "axios";

export default {
  name: 'MailboxLayout',
  inject: ['reload'],
  components: {
    MailDetail,
    MailboxList,
    MailboxSidebar,
    MailboxHome,
    MailboxHeader,
    ContactList,
  },
  computed:{
    ...mapGetters(['folderTo','selectInputTo']),
    ...mapState(['currentComponent','emailId','user']),
  },
  created() {


  },
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.user.userPass) {
        callback(new Error('旧密码输入错误!'));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.newPassword) {
        callback(new Error('两次输入的密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      emaildtail: false,
      contact:false,
      dialogVisible:false,
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      rules:{
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          {validator: validateOldPass, trigger: ['blur', 'change'] }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, message: '请再次输入新密码', trigger: 'blur' },
          { validator: validatePass, trigger: ['blur', 'change'] }
        ],
      }
    };
  },
  methods: {
    ...mapActions['replaceComponent'],
    ...mapMutations(['replaceComponent','setEmailList']),
    handleRowClicked() {
      // 根据条件设置currentComponent为D或E
      if (this.folderTo!==null) {
        this.replaceComponent('MailboxList');
        this.reload;
      }
    },
    handleSearch() {
      // 处理搜索逻辑
      if(this.selectInputTo!==''&&this.selectInputTo!==null){
        this.replaceComponent('MailboxList');
        this.reload;
      }
    },
    goToContact() {
      if (this.$route.name !== 'ContactList') {
        this.replaceComponent('ContactList');
        this.reload;
      }
    },
    goToWrite() {
       if (this.$route.name !== 'MailWrite') {
        this.replaceComponent('MailWrite');
        this.reload();
      }
   },
    resetState() {
      // 重置组件状态逻辑
      this.currentComponent = null;
    },
    submitForm(){
      console.log("提交")
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.changePassword();
          this.$router.push('/')
        }
      });
    },
    changePassword(){
      axios.post('http://localhost:8989/user/changePassword', {
        userId: this.user.userId,
        userName: this.user.userName,
        userPass: this.form.newPassword,
      })
          .then((response) => {
            console.log(response.data);
            this.dialogVisible = false;
            this.$message({
              message: '修改成功',
              type: 'success'
            });

          })
          .catch((error) => {
            this.$message({
              message: '修改失败',
              type: 'error'
            });
          })

    },


  },

  watch:{
    emaildtail(newVal){
      this.emaildtail(newVal);
    },
    contact(newVal){
      this.contact(newVal);
    }

  }
};
</script>

<style scoped>
.mailbox-layout {
  /* 布局样式 */
  //background-image:url("@/assets/background.jpg");
  //background-repeat: no-repeat; /* 不重复图片 */
  //background-size: cover; /* 图片覆盖整个元素 */
  //height: 100%;
  //width: 100%;
  //background-color: gray;
}
.mailbox-header {
  /* 顶部导航栏样式 */
  margin-top: -5px;
  background-color: #f5f7fa;
  height: 60px;
}
.mailbox-sidebar {
  /* 左侧侧边栏样式 */
  border-top: 2px solid #ccc;
  background-color: #f5f7fa;
  height: 100vh;
}
.mailbox-main {
  border-top: 2px solid #ccc;
  /* 邮件内容区域样式 */
  width: 80%;
}
</style>